<template>
  <div class="seal">
    <a-skeleton v-if="loading" />
    <div v-else>
      <a-empty class="empty" v-if="pageData.length == 0" />
      <div class="seal-content flex" v-else>
        <div class="card" v-for="(item, index) in pageData" :key="index">
          <div class="header flex-between">
            <p>
              <!-- 合同类型 -->
              <span class="margin-r10 title">
                {{$dealDic(sealType,item.type,'label')}}
              </span>
              <!-- 审核状态 -->
              <a-tag :color="$dealDic(sealAuditState,item.auditState,'tagColor')">{{$dealDic(sealAuditState,item.auditState,'label')}}</a-tag>
            </p>
            <p v-if="item.auditState === 1">
              <a-button type="primary" class="passBtn" size="small" @click="handleEdit(item)">
                编辑
              </a-button>
            </p>
            <p v-if="item.auditState === 0">
              <a-button class="margin-r10" type="danger" size="small" @click="handleRefuse(item)">拒绝
              </a-button>

              <a-popconfirm :title="`是否审批通过该${$dealDic(sealType,item.type,'label')}?`" ok-text="确定" cancel-text="取消" @confirm="handlePass(item.id)">
                <a-button type="primary" class="passBtn" size="small">
                  审核通过
                </a-button>
              </a-popconfirm>
            </p>
          </div>
          <div class="content">
            <p class="flex-between">
              <span class="text-left">
                <a-badge status="default" />
                提交人： <a-tooltip placement="topLeft"  v-if="item.createUser" :title="item.createUser.realName">
                          <span>{{ item.createUser.realName }}</span>
                        </a-tooltip>
                        
                <span v-else>-</span>
              </span>
              <span class="time">
                <a-badge status="default" />
                申请时间：{{ $getTime(item.createDate) }}
              </span>
            </p>
            <p class="flex-between">
              <span class="text-left">
                <a-badge status="default" />
                审核人：系统
              </span>
              <span  class="time">
                <a-badge status="default" />
                更新时间：{{ $getTime(item.updateDate) }}
              </span>
            </p>
          </div>
          <div class="flex-center" v-viewer="{ movable: true, title: true }">
            <img slot="cover" alt="example" :src="item.ossFileLink" />
          </div>
        </div>
      </div>
    </div>

    <a-modal v-if="handleType == 'edit'" :title="'编辑'" :visible="editVisible" @ok="handleRefuseOk" @cancel="handleRefuseCancel" :destroyOnClose="true" :footer="null">
      <m-Edit @successCallback="successCallback" :datas="eidtDatas"></m-Edit>
    </a-modal>

    <a-modal v-else :title="'拒绝理由'" :visible="visible" @ok="handleRefuseOk" @cancel="handleRefuseCancel" :destroyOnClose="true">
      <c-form-model :datas="formData" v-model="form" :rules="rules" ref="formModels"></c-form-model>
    </a-modal>
  </div>
</template>

<script>
import { auditCompanySeal, getCompanySealList } from "@/api/company/seal";
import { sealType, sealAuditState } from "@/dict/seal";
import mEdit from "../../../Seal/edit";

export default {
  name: "Seal",
  components: {
    mEdit
  },
  data() {
    return {
      sealType,
      sealAuditState,
      editVisible: false,
      visible: false,
      loading: false,
      handleType: "edit",
      sealId: "",
      pageData: [],
      eidtDatas: {},
      form: {
        refuse: ""
      },
      formData: [
        {
          label: "拒绝理由",
          prop: "refuse",
          type: "textarea",
          rows: 6
        }
      ],
      rules: {
        refuse: [ { required: true, message: "请输入拒绝理由", trigger: "blur" } ]
      }
    };
  },
  created() {
    if (this.$route.query.companyId) {
      this.onPageOnlod();
    }
  },
  mounted() { },
  methods: {
    // 初始化页面
    onPageOnlod() {
      this.loading = true;
      getCompanySealList(this.$route.query.companyId)
        .then(res => {
          this.pageData = res.data;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleEdit(row) {
      this.sealId = row.id;
      this.editVisible = true;
      this.eidtDatas = row;
      this.handleType = "edit";
    },
    handleRefuseCancel() {
      if (this.handleType == "edit") {
        this.editVisible = false;
      } else {
        this.visible = false;
      }
      this.onPageOnlod();
    },
    //拒绝(弹窗提交)
    handleRefuseOk() {
      this.$refs.formModels.handleValidate().then(data => {
        this.handlePass(this.sealId, data);
      });
    },
    //拒绝
    handleRefuse(row) {
      this.sealId = row.id;
      this.visible = true;
      this.handleType = "refuse";
    },
    //通过、拒绝（提交）
    handlePass(id, data) {
      auditCompanySeal({
        id: id,
        auditState: data ? 2 : 1,
        remark: data ? data.refuse : ""
      })
        .then(res => {
          this.$message.success("操作成功");
          this.visible = false;
          this.onPageOnlod();
        })
        .catch(() => { });
    },
    //修改尺寸成功（回调函数）
    successCallback() {
      this.onPageOnlod();
      this.editVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
@import '~@/style/index.less';
.seal {
  .empty {
    margin: 30px;
  }
  .seal-content {
    p {
      margin: 10px 0;
    }
    .card {
      width: 390px;
      margin-right: 30px;
      .cardBoxShadow;
      border: 1px solid @colorBorder;
      padding-bottom: 30px;
      .header {
        width: 100%;
        padding: 5px 10px;
        background: @colorBg;
        border-bottom: 1px solid @colorBorder;
        .title {
          font-size: 13px;
          font-weight: 600;
        }
      }
      .content {
        padding: 10px 15px;
      }
    }
    img {
      max-width: 300px;
      height: 180px;
    }
    .passBtn {
      background: @colorBoxGreen;
      border-color: @colorBoxGreen;
    }
    .text-left {
      .ellipsis(136px);
    }
    .time {
      .ellipsis(220px);
    }
  }
}
</style>
